import { memberInfo, useMemberStore } from "@/popup/stores/member";
import "./index.less";
import { Button, Tooltip } from "antd";
import { useUserStore } from "@/popup/stores/user";
import { MemberDetailModal } from "../MemberDetailModal";
import { useState } from "react";

type IProps = {
  info: memberInfo;
};

export const MemberCard = ({ info }: IProps) => {
  const { favoriteList, saveFavoriteList } = useMemberStore();
  const { userInfo } = useUserStore();
  const [open, setOpen] = useState(false);
  const userId = userInfo?.userInfo?.userId;
  const handleFavorite = (favorite: boolean) => {
    const newFav = { ...favoriteList };
    const oriFavList = newFav?.[userId] || [];
    if (favorite) {
      newFav[userId] = [...oriFavList, info?.memberId];
    } else {
      newFav[userId] = oriFavList.filter((id) => id !== info?.memberId);
    }
    saveFavoriteList(newFav);
  };
  return (
    <div
      className="member-card-item"
      style={{
        width: "220px",
        border: "1px solid #e8e8e8",
        borderRadius: "4px",
        padding: "8px",
        backgroundColor: "#fff",
        boxShadow: "0 0 20px 0 rgba(0, 0, 0, 0.05)",
      }}
    >
      <div
        style={{
          borderBottom: "1px solid #e8e8e8",
          padding: "8px",
        }}
      >
        {/* 头像区域 */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            // justifyContent: "space-between",
          }}
        >
          <div
            style={{
              marginRight: "8px",
              marginTop: "-2px",
            }}
          >
            <img
              src={info?.serverIcon}
              alt="avatar"
              style={{ width: "28px", height: "28px", borderRadius: "50%" }}
            />
          </div>
          <div
            style={{ lineHeight: "28px", fontSize: "18px", fontWeight: "500" }}
          >
            {info?.memberName}
          </div>
        </div>
        {/* 基础信息区域 */}
        <div
          className="member-card-basic-info-wrapper"
          style={{
            display: "flex",
            flexDirection: "column",
            width: "100%",
            marginTop: "8px",
            marginBottom: "0px",
          }}
        >
          <div style={{ display: "flex", width: "100%" }}>
            <div
              className="member-card-basic-info-label"
              style={{ width: "70px", textAlign: "left" }}
            >
              队伍：
            </div>
            <div style={{ flex: 1, textAlign: "left" }}>{info?.teamName}</div>
          </div>
          <div style={{ display: "flex", width: "100%" }}>
            <div
              className="member-card-basic-info-label"
              style={{ width: "70px", textAlign: "left" }}
            >
              id：
            </div>
            <div style={{ flex: 1, textAlign: "left" }}>{info?.memberId}</div>
          </div>
          <div style={{ display: "flex", width: "100%" }}>
            <div
              className="member-card-basic-info-label"
              style={{ width: "70px", textAlign: "left" }}
            >
              房间名：
            </div>
            <Tooltip title={info?.serverName}>
              <div
                style={{
                  flex: 1,
                  textAlign: "left",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                }}
              >
                {info?.serverName}
              </div>
            </Tooltip>
          </div>
          <div style={{ display: "flex", width: "100%" }}>
            <div
              className="member-card-basic-info-label"
              style={{ width: "70px", textAlign: "left" }}
            >
              队伍id：
            </div>
            <div style={{ flex: 1, textAlign: "left" }}>{info?.teamId}</div>
          </div>
        </div>
      </div>
      {/* 操作区 */}
      <div style={{ display: "flex", padding: "8px 8px 0 8px" }}>
        <div
          style={{
            flex: 1,
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <Button
            style={{
              height: "20px",
              padding: "0",
            }}
            onClick={() => {
              setOpen(true);
            }}
            type="link"
          >
            详情
          </Button>
        </div>
        <div
          style={{
            flex: 1,
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            borderLeft: "0.5px solid #e8e8e8",
          }}
        >
          {favoriteList?.[userInfo?.userInfo?.userId]?.includes(
            info?.memberId
          ) ? (
            <span
              onClick={() => {
                handleFavorite(false);
              }}
              className="favorite-btn-disabled"
            >
              取消关注
            </span>
          ) : (
            <span
              onClick={() => {
                handleFavorite(true);
              }}
              className="favorite-btn"
            >
              关注
            </span>
          )}
        </div>
      </div>
      <MemberDetailModal info={info} open={open} setOpen={setOpen} />
    </div>
  );
};
